﻿@{
    ViewBag.Title = "Home Page";
}
<style type="text/css">
    .carousel-indicators.forls {
        top: 450px;
        left: 450px;
    }

    li.forls {
        background-color: silver;
    }

        li.forls.active {
            background-color: #F8B900;
        }

    .carousel-inner.forls {
        width: 800px;
        margin: auto;
    }

    .carousel-control.left.forls {
        visibility: hidden;
    }

    .carousel-control.right.forls {
        visibility: hidden;
    }
</style>
<div>
    <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators forls">
            <li data-target="#myCarousel" data-slide-to="0" class="active forls"></li>
            <li data-target="#myCarousel" data-slide-to="1" class="forls"></li>
            <li data-target="#myCarousel" data-slide-to="2" class="forls"></li>
            <li data-target="#myCarousel" data-slide-to="3" class="forls"></li>
            <li data-target="#myCarousel" data-slide-to="4" class="forls"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner forls">
            <div class="active item">
                <img src="~/Content/images/HomePageCarousel/1.jpg" />
            </div>
            <div class="item">
                <img src="~/Content/images/HomePageCarousel/2.jpg" />
            </div>
            <div class="item">
                <img src="~/Content/images/HomePageCarousel/3.jpg" />
            </div>
            <div class="item">
                <img src="~/Content/images/HomePageCarousel/4.jpg" />
            </div>
            <div class="item">
                <img src="~/Content/images/HomePageCarousel/5.jpg" />
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>
<div class="hero-unit">
    <h2>Lost Something</h2>
    <p>Welcome to Lost Something portal.Here you can find somthing back by your card.</p>
    <p>@Html.ActionLink("My Cards", "Index", "MyCard", null, new { @class = "btn btn-primary btn-large", style = "color: White;" })</p>
</div>
